微型(約2KB)JavaScript平台效果函式庫

GitHub Star: 2,900
Javascripting Overall: -
瀏覽器: Chrome、Firefox和IE9+
RWD: 不支援(可運作)
License: MIT

《安裝》

• CDN

    <!-- sketch.js v1.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0/sketch.min.js"></script>
  

• npm

    $ npm install sketch-js
  

《範例》

• 背景顏色跟著滑鼠移動變化

    <script>
    	var example = Sketch.create({
    		// 參數設定[註1]
    		fullscreen: true, // 滿版
    		autostart: true, // 自動開始，否則需要透過`start`函式執行開始
    		autoclear: true, // 每次繪畫前自動清除，否則需要透過`clear`函式執行清除
    		autopause1: true, // 當失焦時，是否自動暫停動畫
    		container: document.body, // 目標物件
    		interval: 1, // 更新/繪圖的間隔
    		globals: true, // 新增全域屬性至window
    		retina: false, // 當裝置是retina時，調整尺寸維持最佳體驗
    		type: Sketch.CANVAS, // 模式
    		eventTarget: null, // 設定滑鼠監聽物件
    	});
    	example.setup = function() {
    		 // 當初始化時，則執行此函式
    		this.r = this.g = this.b = random( 100, 200 ) // 設定R、G、B三個變數
    	}
    	example.mousemove = function() {
    		 // 當滑鼠移動時，則執行此函式
    		 console.log( this.mouse )
    		 this.r = 255 * (this.mouse.x / this.width) 
    		 this.g = 255 * (this.mouse.y / this.height)
    		 this.b = 255 * abs(cos(PI * this.mouse.y / this.width))
    	}
    	example.draw =  function() {
    		// 繪圖函式
    		this.fillStyle = "rgb(" + Math.round( this.r ) + "," + Math.round( this.g ) + "," + Math.round( this.b ) + ")"; // 填滿矩形的顏色
    		this.fillRect(0, 0, this.width, this.height) // 填滿矩形
    	}
  

  [註1]

  參數	預設值	描述

  fullscreen|true|滿版
  autostart|true|自動開始，否則需要透過start函式執行開始
  autoclear|true|每次繪畫前自動清除，否則需要透過clear函式執行清除
  autopause1|true|當失焦時，是否自動暫停動畫
  container|document.body|目標物件
  interval|1|更新/繪圖的間隔
  globals|true|新增全域屬性至window
  retina|false|當裝置是retina時，調整尺寸維持最佳體驗
  type|Sketch.CANVAS|模式
  eventTarget|null|設定滑鼠監聽物件

  函式列表

  函式	描述

  setup()|當初始化時，則執行此函式
  mousemove()|當滑鼠移動時，則執行此函式
  draw()|繪圖函式

《延伸》

1. sketch.js
2. soulwire/sketch.js: Cross-Platform JavaScript Creative Coding Framework